<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>案例练习</title>
    <!-- 引入姚昶负责付费部分专用 CSS 文件 -->
    <link rel="stylesheet" href="../../../css/ycCSSforPurchase.css">
    <script type="text/javascript" src="http://pv.sohu.com/cityjson/getip.aspx" charset="utf-8">//搜狐接口获取ip</script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"> //引入jq资源</script>
</head>
<style>

</style>

<body>
    <div class="ycmusicPack">
        <div class="ycpackHead">
            <img src="../../../images/ycpics/musicPack.png">
            <span>付费音乐包</span>
            <div class="ycagreeLaw">
                <i id="yccheckAgree" onclick="yccheckRuler()"
                    style="display: inline-block;width: 12px;height: 12px;"></i>
                同意《
                <a id='ycserviceRuler'>服务条款</a>
                》
            </div>
            <div class="ycclosePurchase" title='关闭'>
                <i class="yccloseIcon"></i>
            </div>
        </div>
        <div class="ycpurchaseContent">
            <div id="ycpurchaseInfo">
                <div id="ycpurchasePrise">
                    <div id="ycpurchaseAccount">
                        <span>开通账号：</span>
                        <div></div>
                    </div>
                    <div id="ycpurchaseGoods">
                        <div class="ycGoodChecked" onclick="ycCheckBlue(1)">
                            <em style="font-size: 38px;color:#313131;font-weight:400;font-style: normal;">7.6</em>

                            <span style="font-size: 14px;color:#969696">元</span>
                            <span style="margin-top: 4px;display: block;color: #7f7f7f;">7.6元/月</span>
                            <i class='ycCheckBlueIcon'></i>
                            <div style="margin: 0px auto;width:100%;border-top: 1px dashed #e3e3e3;">连续包月</div>
                        </div>
                        <div onclick="ycCheckBlue(2)">
                            <em style="font-size: 38px;color:#313131;font-weight:400;font-style: normal;">24</em>

                            <span style="font-size: 14px;color:#969696">元</span>
                            <span style="margin-top: 4px;display: block;color: #7f7f7f;">8元/月</span>
                            <i class='ycCheckBlueIcon'></i>
                            <div style="margin: 0px auto;width:100%;border-top: 1px dashed #e3e3e3;">3个月</div>
                        </div>
                        <div onclick="ycCheckBlue(3)">
                            <em style="font-size: 38px;color:#313131;font-weight:400;font-style: normal;">45</em>

                            <span style="font-size: 14px;color:#969696">元</span>
                            <span style="margin-top: 4px;display: block;color: #7f7f7f;">7.5元/月</span>
                            <i class='ycCheckBlueIcon'></i>
                            <div style="margin: 0px auto;width:100%;border-top: 1px dashed #e3e3e3;">6个月</div>
                        </div>
                        <div onclick="ycCheckBlue(4)">
                            <em style="font-size: 38px;color:#313131;font-weight:400;font-style: normal;">8</em>

                            <span style="font-size: 14px;color:#969696">元</span>
                            <span style="margin-top: 4px;display: block;color: #7f7f7f;">8元/月</span>
                            <i class='ycCheckBlueIcon'></i>
                            <div class="ycPackMonth" style="position:relative;">
                                <button type="button" class="ycPlusReduce" style="float: left;"
                                    onclick="ycPlusReduce('reduce')">
                                    <i></i>
                                </button>
                                <div class="ycPackInput" style="display: inline-block;">
                                    <input type="text" minlength="1" maxlength="2" value=1
                                        oninput="value=value.replace(/[^\d]/g,'')"><span style="cursor: text;">个月</span>
                                </div>
                                <button type="button" class="ycPlusReduce" style="float: right;"
                                    onclick="ycPlusReduce('plus')">
                                    <i class="icon-add" style="background-position: 0 0;"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="display: block;padding:10px 70px;font-weight: 400;font-size: 14px;">支付方式：</div>
                <div id="ycpurchaseWayBox">
                    <div class="ycpurchaseWay ycGoodChecked" onclick="ycCheckBlue2(0)"><i></i>微信支付</div>
                    <div class="ycpurchaseWay" onclick="ycCheckBlue2(1)"><i></i>QQ钱包</div>
                    <div class="ycpurchaseWay" onclick="ycCheckBlue2(2)"><i></i>Q币支付</div>
                    <div class="ycpurchaseWay" onclick="ycCheckBlue2(3)" id="ycpurchaseMore"><i></i>
                        <div style="display: block;height:40px;margin-bottom: 10px;">更多方式</div>
                        <div class="ycMoreWays"><i></i>手机话费</div>
                        <div class="ycMoreWays"><i></i>QQ卡</div>
                        <div class="ycMoreWays"><i></i>网银支付</div>
                    </div>
                </div>
                <div class="ycPay" id="ycVchatPay">
                    <div style="margin-bottom: 7px;">
                        <i style="background-position: -142px -129px;"></i>
                        微信扫码，支付<span class="ycFinalPrice">7.6</span>元
                    </div>
                    <div class="ycQRPay">
                        <img style="width: 120px;height: 120px;"
                            src="https://api.qrserver.com/v1/create-qr-code?data=https://weixin.qq.com/">
                    </div>
                </div>
                <div class="ycPay" style='display: none;' id="ycQQPay">
                    <div style="margin-bottom: 7px;">
                        <i style="background-position: -69px -81px;"></i>
                        手Q扫码，支付<span class="ycFinalPrice">7.6</span>元
                    </div>
                    <div class="ycQRPay">
                        <img style="width: 120px;height: 120px;"
                            src="https://api.qrserver.com/v1/create-qr-code?data=https://im.qq.com/index">
                    </div>
                </div>
                <div class="ycPay" style='display: none;text-align: left;' id="ycQBPay">
                    <div style="margin-bottom:20px;">
                        <i style="background-position: -164px -177px;"></i>
                        <span style="font-size: 12px;vertical-align: top;">Q币余额不足</span>
                        <span style="font-size: 12px;vertical-align: top;color: gray;"> 余额:&nbsp;<span
                                style="color:black">0</span>&nbsp;Q币<br>
                            还需&nbsp;<span class="ycFinalPrice" style="color: black;font-size: 12px;"></span>
                            &nbsp;Q币，请先去充值，或选择其他支付方式</span>
                    </div>
                    <button class="ycPayButton">去充值</button>
                </div>
                <div class="ycPay" style='display: none;text-align: left;' id="ycPhonePay">
                    <div style="margin-bottom: 20px;">
                        <input type="text" class="ycPayInput" maxlength="11" placeholder="请输入手机号码">
                    </div>
                    <button class="ycPayButton">去充值</button>
                    <div style="margin-top: 10px;">
                        <i style="background-position: -113px -176px;"></i><span
                            style="vertical-align: top;">具体资费会根据号码归属地相应调整，请输入手机号码后查询
                        </span>
                    </div>
                </div>
                <div class="ycPay" style='display: none;text-align: left;' id="ycQCardPay">
                    <div style="margin-bottom: 20px;">
                        <input type="text" class="ycPayInput" style="margin-bottom: 10px;" placeholder="请输入QQ卡号">
                        <br>
                        <input type="text" class="ycPayInput" placeholder="请输入QQ卡密码">
                    </div>
                    <button class="ycPayButton">确认支付</button>
                    <div style="margin-top: 10px;">
                        <i style="background-position: -113px -176px;"></i><span style="vertical-align: top;">QQ卡可分多次使用
                        </span>
                    </div>
                </div>
                <div class="ycPay" style='display: none;font-size: 0;' id="ycUnionPay">
                    <div class="ycBankBox"></div>
                    <button class="ycPayButton"
                        style="margin-top: 10px;text-align: center;font-size: 14px;line-height:40px ;"><span>去支付
                        </span><span class="ycFinalPrice" style="font-size: 14px;"></span><span>元</span></button>
                    <!-- <div class="bank bdcolor">
                        <i class="i ia jl"></i>
                        <i class="ib"></i>
                        <span>招商银行</span>
                        ↑渲染银行 曹辉部分 -->
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
<script src="../js/ycBank.js">//银行列表及精灵图position信息</script>
<script src="musicPack.js">//付费音乐包的js包，必须要在body后才能正常调用</script>
<script>
</script>

</html>